<template>
  <div class="task-rate main-contianer2">
    <div class="top-nav flex-row">
      <span>共{{taskRateData.stuNum}}人</span>
      <span>平均进度：{{taskRateData.finishedRate || '0%'}}</span>
      <span>平均时长：{{taskRateData.averDuration || 0}}</span>
      <span>共有{{taskRateData.averDuration}}人完成本任务</span>
      <el-button size="small" @click="back">返回</el-button>
    </div>
    <div class="left-list">
      <div class="top-title">[{{taskRateData.taskTypeName}}] {{taskRateData.taskTitle}}</div>
      <div class="title">任务说明</div>
      <div class="task-remark">{{taskRateData.taskRemark}}</div>
      <ul >
        <!-- taskRateData.finishedList -->
        <li class="item flex-row" v-for="(item, index) of 5" :key="index">
          <!-- <div class="left">
            <div class="index">{{index+1}}</div>
            <img class="img" :src="item.headImgUrl" />
            <div class="text">
              <p>{{item.studentName}} [{{tableData.studyProgressStudyVo.className}}]</p>
              <p>{{item.duration}}</p>
            </div>
          </div>
          <div class="dianzan">{{item.likeNum}}</div> -->
          <div class="left flex-row">
            <div class="index">1</div>
            <img class="img" src="~@/assets/images/kc_rwgl@2x.png" />
            <div class="text flex-col">
              <p>名字 [班级]</p>
              <p>11s</p>
            </div>
          </div>
          <div class="dianzan">111</div>
        </li>
      </ul>
    </div>
    <div class="right-main">
      <div class="top-title">课程名称： {{taskRateData.lessonName}}</div>
      <div class="title">发布时间：{{taskRateData.publishTime}}</div>
      <div class="title">任务成绩</div>
      <ul class="flex-row status-list">
        <li class="flex-col">
          <el-progress type="circle" :percentage="25"></el-progress>
          <p>时长</p>
        </li>
        <li class="flex-col">
          <el-progress type="circle" color="#5cb87a" :percentage="25"></el-progress>
          <p>时长</p>
        </li>
         <li class="flex-col">
          <el-progress color="#f56c6c" type="circle" :percentage="25"></el-progress>
          <p>时长</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { taskRate } from '@/api/teacher/course/task'

export default {
  data () {
    return {
      taskRateData: []
    }
  },
  props: {
    editTask: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    editTask: {
      handler () {
        this.taskRate()
      },
      deep: true
    }
  },
  methods: {
    async taskRate () {
      const res = await taskRate(this.editTask)
      if (res.code === '200') {
        this.taskRateData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    back () {
      this.$emit('back')
    }
  },
  components: {
  },
  mounted () {
    this.taskRate()
  }
}
</script>

<style scoped lang="scss">
  .task-rate {
    position: relative;
    margin-top: 20px;
    .top-nav {
      width: 60%;
      position: absolute;
      top: -80px;
      right: 20px;
    }
    .top-title {
        font-weight: 500;
        font-size: 24px;
        color: rgba(16, 29, 55, 1);
      }
      .title {
        font-size: 16px;
        margin: 20px 0;
      }
    .left-list {
      width: 452px;
      background: #fff;
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      padding: 20px;

      .item {
        margin: 20px 0;
        .img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin: 0 10px;
        }
        .text {
          height: 40px;
          align-items: flex-start;
        }
      }
    }
    .right-main {
      width: 728px;
      height: 100%;
      background: #fff;
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      overflow-y: scroll;
      padding: 20px;
      .status-list {
        padding: 0 30px;
        p {
          margin-top: 20px;
        }
      }
    }
  }
</style>
